<template>
	<div class="app-loading-box">
        <div class="box">
            <div style="font-size:35px;margin-bottom: 30px;">小程序中心</div>
            <div style="margin:20px 0;">
                <el-progress :percentage="percentage" :format="format" style="width:100%;position: relative;left:28px;"/>
            </div>
            <div>已加载{{ percentage }}%,马上进入</div>
        </div>
	</div>
</template>
<script setup lang="ts">

import { ref,onMounted } from "vue";

const emit = defineEmits(['change']);

const percentage=ref(0)
const format = (percentage) => (percentage === 100 ? '' : '')


onMounted(()=>{
    
	setTimeout(()=>{
	    percentage.value=20;
	}, 200);
	setTimeout(()=>{
	    percentage.value=40;
	}, 400);
	setTimeout(()=>{
	    percentage.value=60;
	}, 600);
	setTimeout(()=>{
	    percentage.value=80;
	}, 800);

	//初始化窗口池
	window.electron.ipcRenderer.send('init-window-pool');
    window.electron.ipcRenderer.on('window-pool-success', (_event) => {
        percentage.value=100;
		emit('change',{type:'close',data:{}});
    });

});

</script>
<style scoped>
.app-loading-box {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: fade-out 2s ease-out both; /* 逐渐消失动画 */
    .box{
        width:300px;
        text-align: center;

    }
}

/* 逐渐消失 */
@keyframes fade-out {
	0% {
	  opacity: 1;
	}
	100% {
	  opacity: 0;
	}
}
</style>